<template>
  <div class="position-container">
    <CardBox title="样地群落信息"></CardBox>
    <div class="content-container">
      <div class="position-content position-content-1">
        <div class="info-header">
          <span class="header-text">调查信息</span>
        </div>
        <div class="info-table">
          <div class="table-row">
            <div class="table-cell">样地名</div>
            <div class="table-cell">调查时间</div>
            <div class="table-cell">调查人</div>
          </div>
          <div class="table-row">
            <div class="table-cell">{{ sample.localName }}</div>
            <div class="table-cell">{{ sample.investigateTime }}</div>
            <div class="table-cell">{{ sample.investigatePerson }}</div>
          </div>
        </div>
      </div>
      <div class="position-content position-content-2">
        <div class="info-header">
          <div class="left-arrow"></div>
          <span class="header-text">生境特征</span>
          <div class="right-arrow"></div>
        </div>
        <div class="info-table">
          <div class="table-row nobg">
            <div class="table-cell color-fff">经纬度</div>
            <div class="table-cell text-right">
              <span class="pr-10">{{ sample.lonGd }}</span>
              <span>{{ sample.latGd }}</span>
            </div>
          </div>
          <div class="table-row-flex">
            <div class="table-cell">
              <div class="table-cell-title">面积/㎡</div>
              <div class="table-cell-content">{{ sample.area }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">海拔/m</div>
              <div class="table-cell-content">{{ sample.alt }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">坡度/°</div>
              <div class="table-cell-content">{{ sample.slope }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">坡向</div>
              <div class="table-cell-content">
                {{ sample.slopeOrientation }}
              </div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">地形地貌</div>
              <div class="table-cell-content">{{ sample.terrain }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="position-content position-content-1">
        <div class="info-header">
          <div class="left-arrow"></div>
          <span class="header-text">群落结构</span>
          <div class="right-arrow"></div>
        </div>
        <div class="info-table">
          <div class="table-row-flex">
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[0].name }}</div>
              <div class="table-cell-content">{{ items1[0].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[1].name }}</div>
              <div class="table-cell-content">{{ items1[1].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[2].name }}</div>
              <div class="table-cell-content">{{ items1[2].value }}</div>
            </div>
          </div>
          <div class="table-row-flex">
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[3].name }}</div>
              <div class="table-cell-content">{{ items1[3].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[4].name }}</div>
              <div class="table-cell-content">{{ items1[4].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[5].name }}</div>
              <div class="table-cell-content">{{ items1[5].value }}</div>
            </div>
          </div>
          <div class="table-row-flex">
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[6].name }}</div>
              <div class="table-cell-content">{{ items1[6].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[7].name }}</div>
              <div class="table-cell-content">{{ items1[7].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[8].name }}</div>
              <div class="table-cell-content">{{ items1[8].value }}</div>
            </div>
          </div>
          <div class="table-row-flex">
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[9].name }}</div>
              <div class="table-cell-content">{{ items1[9].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[10].name }}</div>
              <div class="table-cell-content">{{ items1[10].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items1[11].name }}</div>
              <div class="table-cell-content">{{ items1[11].value }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="position-content position-content-1">
        <div class="info-header">
          <div class="left-arrow"></div>
          <span class="header-text">植物多样性</span>
          <div class="right-arrow"></div>
        </div>
        <div class="info-table">
          <div class="table-row">
            <div class="table-cell text-center">{{ items2[0].name }}</div>
            <div class="table-cell"></div>
            <div class="table-cell text-center">{{ items2[0].value }}</div>
          </div>
          <div class="table-row-flex">
            <div class="table-cell">
              <div class="table-cell-title">{{ items2[1].name }}</div>
              <div class="table-cell-content">{{ items2[1].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items2[2].name }}</div>
              <div class="table-cell-content">{{ items2[2].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items2[3].name }}</div>
              <div class="table-cell-content">{{ items2[3].value }}</div>
            </div>
          </div>
          <div class="table-row-flex">
            <div class="table-cell">
              <div class="table-cell-title">{{ items2[4].name }}</div>
              <div class="table-cell-content">{{ items2[4].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items2[5].name }}</div>
              <div class="table-cell-content">{{ items2[5].value }}</div>
            </div>
            <div class="table-cell">
              <div class="table-cell-title">{{ items2[6].name }}</div>
              <div class="table-cell-content">{{ items2[6].value }}</div>
            </div>
          </div>
        </div>
      </div>
      <el-carousel
              class="image-swiper"
              :interval="5000"
              height="270px"
              arrow="always">
        <el-carousel-item v-for="(a, $i) in images" :key="$i">
          <el-image
                  style="width: 100%; height: 270px"
                  :src="a.url"
                  :preview-src-list="images.map(v => v.url.replace('mw=500&mh=500&',''))"
                  :initial-index="$i"
                  :fit="'cover'">
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import CardBox from "@/components/Global/CardBox.vue";
import { EventBus } from "../../utils/event-bus";
export default {
  components: { CardBox },
  inject: ["imgUrl"], // 注入公共变量
  data() {
    return {
      images:[],
      tableData: [],
      biologicalType: "qixiang",
      speciesType: "hongwai",
      photos: [],
      sample: {
        id: "c2",
        localName: "c2",
        code: "",
        localArea: "",
        localPhoto: "",
        investigateTime: "",
        investigatePerson: "",
        lonGd: 0,
        latGd: 0,
        area: "",
        alt: "",
        slope: 10.0,
        slopeOrientation: "东",
        terrain: "中间隆起",
        matrix: "",
        type: "deciduous",
        deviceData: "",
      },
      items1: [
        {
          id: 0,
          samplePlotId: 0,
          type: "",
          name: "",
          sort: 0,
          value: "",
          description: "",
        },
      ],
      items2: [
        {
          id: 0,
          samplePlotId: 0,
          type: "",
          name: "",
          sort: 0,
          value: "",
          description: "",
        },
      ],
    };
  },
  created() {
    EventBus.$on("sent-device-id-to-right", (message) => {
      this.sample = message;
      this.getItemList(message.id);
      if (this.sample.localPhoto) {
        this.photos = this.sample.localPhoto.split(",");
        while (this.images.length){
          this.images.pop();
        }
        if (this.photos) {
          for (let i = 0; i < this.photos.length; i++) {
            this.images.push({ url: this.imgUrl + this.photos[i] });
          }
        }
      }
    });
  },
  methods: {
    getItemList(samplePlotId) {
      this.$api.sample.getItemList(samplePlotId, "群落结构").then((res) => {
        this.items1 = res;
        if (res && res.length < 12) {
          for (var i = res.length; i < 12; i++) {
            this.items1.push({
              id: 0,
              samplePlotId: 0,
              type: "",
              name: "",
              sort: 0,
              value: "",
              description: "",
            });
          }
        }
      });
      this.$api.sample.getItemList(samplePlotId, "植物多样性").then((res) => {
        this.items2 = res;
        if (res && res.length < 12) {
          for (var i = res.length; i < 12; i++) {
            this.items2.push({
              id: 0,
              samplePlotId: 0,
              type: "",
              name: "",
              sort: 0,
              value: "",
              description: "",
            });
          }
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
  .image-swiper {
    margin: 0 auto;
    display: block;
    object-fit: cover;
  }

.content-container {
  padding: 10px;
  background: #063c6a;
}
.position-content {
  width: 100%;

  font-size: 14px;
  margin-bottom: 6px;
  &:nth-child(1) {
    background: url("@/assets/img/table-bg-1.png") no-repeat;
    background-size: 100% 100%;
  }
  &:nth-child(2) {
    background: url("@/assets/img/table-bg-2.png") no-repeat;
    background-size: 100% 100%;
  }
  &:nth-child(3) {
    background: url("@/assets/img/table-bg-3.png") no-repeat;
    background-size: 100% 100%;
  }
  &:nth-child(4) {
    background: url("@/assets/img/table-bg-4.png") no-repeat;
    background-size: 100% 100%;
  }
  .info-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 28px;
    line-height: 28px;
    .header-text {
      color: #fff;
      font-size: 14px;
      padding: 0 20px;
    }
  }
  .info-table {
    width: 100%;
    color: #fff;

    .table-row {
      display: flex;
      justify-content: space-between;
      height: 28px;
      line-height: 28px;
      &:nth-child(odd) {
        background: rgba(65, 123, 214, 0.19);
        color: #ccc;
      }
    }

    .table-cell {
      flex: 1;
      text-align: center;
      font-size: 14px;
    }
  }
  .table-row-flex {
    display: flex;
    justify-content: space-between;
    height: 56px;
    line-height: 28px;
    .table-cell {
      flex: 1;
      text-align: center;
      font-size: 14px;
    }
    .table-cell-title {
      background: rgba(65, 123, 214, 0.19);
      color: #fff;
    }
    .table-cell-content{
      background: rgba(0, 150, 255, 0.3);
      color: #fff;
    }
  }
}
.position-content-1 {
  .table-row-flex:nth-child(2n + 1) {
    .table-cell:nth-child(2n + 1) {
      /*background: rgba(65, 123, 214, 0.19);*/
    }
  }
  .table-row-flex:nth-child(2n) {
    .table-cell:nth-child(2n) {
      /*background: rgba(65, 123, 214, 0.19);*/
    }
  }
}
.position-content-2 {
  .info-header {
    /*background: rgba(65, 123, 214, 0.19);*/
  }
  .info-table {
    .table-row {
      .table-cell {
        &:first-child {
          text-align: left;
          padding-left: 20px;
        }
        &:not(:first-child) {
          text-align: right;
          padding-right: 20px;
        }
      }
    }
    .table-row-flex {
      .table-cell:nth-child(odd) {
        /*background: rgba(65, 123, 214, 0.19);*/
      }
    }
  }
}
.position-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ellipsis {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nowrap {
  white-space: nowrap;
}

:deep(.el-table) {
  background: transparent;
  font-size: 14px;

  &::before {
    display: none;
  }

  tr {
    background: transparent;
    height: 28px;
  }

  .el-table__body {
    tr {
      &.el-table__row--striped td {
        /*background: rgba(65, 123, 214, 0.19);*/
      }
      &:hover {
        td {
          color: #07ffe5 !important;
          /*background: rgba(65, 123, 214, 0.19) !important;*/
        }
      }
    }
  }

  th.el-table__cell {
    /*background: rgba(65, 123, 214, 0.19) !important;*/
    /*border-bottom: 1px solid rgba(0, 150, 255, 0.3);*/
    color: #fff !important;
    font-weight: 500;
    padding: 4px 10px;
    height: 28px;
    line-height: 20px;

    &.is-leaf {
      /*border-bottom: 1px solid rgba(0, 150, 255, 0.3);*/
    }

    &:hover {
      /*background: rgba(65, 123, 214, 0.19) !important;*/
      color: #fff !important;
    }
  }

  td.el-table__cell {
    background: transparent;
    /*border-bottom: 1px solid rgba(0, 150, 255, 0.3);*/
    color: #fff;
    padding: 4px 10px;
    height: 28px;
    line-height: 20px;
    cursor: pointer;
  }

  .el-table__body tr.hover-row > td.el-table__cell {
    /*background: rgba(65, 123, 214, 0.19);*/
  }

  .el-table__body tr:hover > td.el-table__cell {
    /*background: rgba(65, 123, 214, 0.19);*/
  }

  .el-table__body-wrapper {
    overflow-x: hidden;
  }
}
</style>